<style type="text/css">
/**{white-space:nowrap; paddding:0 auto; margin:0 auto; }*/


.frame{ border:2px solid #611; font:9pt sans-serif; }
#frames{ float:left; }
#view{ width:800px; height:600px; background:#def; float:left;}
#r0{ background:#fed; overflow:scroll; }
/*#ctrls{ background:#200; color:#eee; font:9pt sans-serif; border-collapse:collapse; }
#ctrls *{  }
ctrls td{ border:1px solid #700; }*/
</style>

<form name="styledform" method="post" action="plugin/styled/stylsave.php">
<div id="frames">


  <div class="frame" id="container">
<select id="html">
<option selected="selected">div</option>
<option>table</option>
<option>td</option>
<option>link</option>
<option>link hover</option>
</select>
<input type="checkbox">will other elements be contained within the element?
overflow
  </div>

  <div class="frame" id="a">anchor<p/>
outline<input type="checkbox" id="aoutline"/>
  </div>

  <div class="frame" id="h">header<p/>
<select id="hlevel">
<option>h1</option>
<option>h2</option>
<option selected="selected">h3</option>
<option>h4</option>
<option>h5</option>
</select>
  </div>

  <div class="frame" id="table">table<p/>
border-collapse<select id="collapse" onchange="borderCollapse(this.options[this.selectedIndex].innerHTML);">
<option selected="selected"></option>
<option>collapse</option>
<option>seperate</option>
<option>inherit</option>
</select>
   </div>

  <div class="frame" id="font">font<p/>
<select id="fontname" onchange="setfontname(this);">
<option selected="selected">Courier New</option>
<option>Tahoma</option>
</select>
family<input type="text" id="fontfamily" onkeyup="fontFamily(this.value);">
<p/>
Smallcaps<input type="checkbox" id="smallcaps"/>
  </div>


  <div class="frame">
box<p/>
border size<input type="text" id="bordersize" size="2" onkeyup="bordersize(this.value)"/>
<select id="borderunits" onchange="borderunits()">
<option selected="selected"></option>
<option>px</option>
<option>em/option>
<option>%</option>
</select>
border style
border color<img class="colorpicker" src="" alt=""/>
border radius<input type="checkbox" id="borderRadius" onchange="borderRadius(this.value)"/>
<p/>
margin top<input type="text" id="margint" size="2"/>
left<input type="text" id="marginl" size="2"/>
right<input type="text" id="marginr" size="2"/>
bottom<input type="text" id="marginb" size="2"/>
  </div>


  <div class="frame">
    <div id="tools" style="text-align:center;">
Name: <input type="text" name=""/><br/>
ID's and values<br/>
<textarea name="" cols="6" rows="10"></textarea><textarea name="" cols="6" rows="10"></textarea>
<input type="button" value="gen <select>"/>
    </div>
  </div>
</div>
<div id="stylsel">testje</div>
<input type="file" value="open web source.." />
<input type="button" value="copy cssrule" onclick="copycssrule()" />
<div id="view">
<input type="button" value="fullscreen" onclick="fullscreen()"/>
</div>

</form>
<script type="text/javascript">//<![CDATA[

function fullscreen(){
  var view=document.getElementById('view');
  if(view.style.position=='absolute'){
    view.style.position='relative'
  }
  else{
    view.style.position='absolute';
    view.style.top='0';
    view.style.left='0';
    view.style.width='100%';
    view.style.height='100%';
  }
}
function margin(s){
    //TRBL Tr+lB t+br+l l+r+t+b
}

function overflow(s){
  alert('border-collapse to'+s);
  //document.getElementById('r0').style.overflow=s;
}

function bordersize(s){
  alert('border size to'+s);
}

function borderstyle(s){
  alert('border style to'+s);
}

function borderRadius(s){
    alert('-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;'+s);
}

function borderCollapse(s){
  alert('bordcl'+s);
  //document.getElementById('r0').style.border
}

ajaxjs('plugin/styled/stylset.php?el=r0&font=29pt%20sans-serif');

function ajaxjs(cmd){
  if (window.XMLHttpRequest){ var x=new XMLHttpRequest(); }
  else{ var x=new ActiveXObject("Microsoft.XMLHTTP"); }
  x.onreadystatechange=function(){ if(x.readyState==4 && x.status==200){ eval(x.responseText); }}
  x.open("GET",cmd,true); x.send(); }

//]]></script>